<template>
  <div id="customer" class="customer">
    <div class="list_box">
      <div style="display:flex;">
        <div class="list-title" style="margin-left: 20px;">
          客户管理-客户详情
        </div>
      </div>
      <div class="list-container">
        <div class="list-heads" style="height:100%;">
          <div class="header-nav">
            <div class="img-nav">
              <img
                :src="Url + custormerCode.cover + $store.state.imgRotate"
                width="100%"
                height="100%"
              />
            </div>
            <div class="header-info">
              <div class="header-text">
                <div>
                  <p>昵称:&nbsp;&nbsp;{{ custormerCode.nick_name }}</p>
                  <p style="margin-top:20px;">
                    成为客户时间:&nbsp;&nbsp;{{ custormerCode.create_at }}
                  </p>
                </div>
                <div style="width: 25%;text-align: center;">
                  <span>客户编码:&nbsp;&nbsp;1340726094</span>
                </div>
                <div style="width: 25%;text-align: center;">
                  <span>客户来源:&nbsp;&nbsp;公众号</span>
                </div>
              </div>
              <div class="header-btn">
                <div v-for="(item, index) in headerbtn" :key="index">
                  <el-button
                    size="small"
                    type="primary"
                    plain
                    @click="customerBtn(index)"
                    >{{ item }}</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-heads" style="height:58px;">
          <div style="margin-top:13px;">
            <span>标签:&nbsp;&nbsp;</span>{{ custormerCode.totalsign }}
          </div>
        </div>
        <div class="list-heads" style="height:100%">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title" style="height:110px;">
                <div style="width:100%;line-height: 30px;">
                  <div>
                    <div style="font-weight: 700;font-size:14px;">
                      <span>{{ oneCode.card__title }}</span>
                    </div>
                    <div style="display:flex;">
                      <div style="width: 25%;">
                        <p>
                          会员等级:&nbsp;&nbsp;<span>会员哒哒哒哒哒哒阿达</span>
                        </p>
                        <p style="margin-top:10px;">
                          状态:&nbsp;&nbsp;<span>正常</span>
                        </p>
                      </div>
                      <div style="width: 20%;">
                        <p>
                          会员卡号:&nbsp;&nbsp;<span>{{
                            oneCode.card__card_number
                          }}</span>
                        </p>
                        <p style="margin-top:10px;">
                          成长值:&nbsp;&nbsp;<span>{{
                            oneCode.growth_value
                          }}</span>
                        </p>
                      </div>
                      <div style="width: 20%;text-align: center;">
                        成为会员时间:&nbsp;&nbsp;<span>{{
                          oneCode.create_time
                        }}</span>
                      </div>
                      <div style="width: 20%;text-align: center;">
                        领卡渠道:&nbsp;&nbsp;<span>用户领卡</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <div
                v-for="(item, index) in cardCode"
                :key="index"
                class="list-heads"
                style="height:100%;"
              >
                <div
                  style="font-weight: 700;font-size:14px;display:flex;justify-content: space-between;"
                >
                  <span>{{ item.card__title }}</span>
                </div>
                <div style="margin-top:10px;display:flex;">
                  <div style="width: 25%;">
                    <p>
                      会员等级:&nbsp;&nbsp;<span>会员哒哒哒哒哒哒阿达</span>
                    </p>
                    <p style="margin-top:10px;">
                      状态:&nbsp;&nbsp;<span>正常</span>
                    </p>
                  </div>
                  <div style="width: 20%;">
                    <p>
                      会员卡号:&nbsp;&nbsp;<span>{{
                        item.card__card_number
                      }}</span>
                    </p>
                    <p style="margin-top:10px;">
                      成长值:&nbsp;&nbsp;<span>{{ item.growth_value }}</span>
                    </p>
                  </div>
                  <div style="width: 20%;text-align: center;">
                    成为会员时间:&nbsp;&nbsp;<span>{{ item.create_time }}</span>
                  </div>
                  <div style="width: 20%;text-align: center;">
                    领卡渠道:&nbsp;&nbsp;<span>用户领卡</span>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="customer-content">
          <div class="list-heads" style="width:49.5%;height: 430px;">
            <div style="text-align:center;">
              <div>
                <span
                  style="font-size: 16px;line-height: 22px;font-weight: 700;"
                  >消费信息</span
                >&nbsp;<i class="el-icon-warning" style="font-size: 14px;"></i>
              </div>
              <div style="margin-top:5px;">
                最近消费时间:&nbsp;&nbsp;<span>2019/06/10</span>&nbsp;&nbsp;距下次购买还剩:&nbsp;&nbsp;<span
                  >10天</span
                >
              </div>
            </div>
            <div
              id="myecharts"
              class="charts"
              style="width:600px;height:360px; margin-top:20px;"
            ></div>
          </div>
          <div class="list-heads" style="width:50%;height: 430px;">
            <div
              style="text-align:center;font-size: 16px;line-height: 22px; font-weight: 700;margin-top:5px;"
            >
              <span>账户资产</span>
            </div>
            <div>
              <div
                style="font-size: 15px;line-height: 22px; font-weight: 700;margin-top:5px;"
              >
                <span>储值账户</span>
              </div>
              <div style="display:flex; width: 100%;margin-top:5px;">
                <div style="width:50%">
                  <p>当前余额:&nbsp;&nbsp;<span>¥12312.00</span></p>
                  <p style="margin-top:5px;">
                    累计充值:&nbsp;&nbsp;<span>1</span>
                  </p>
                </div>
                <div>
                  <p>累计余额:&nbsp;&nbsp;<span>¥12312.00</span></p>
                  <p style="margin-top:5px;">
                    充值金额:&nbsp;&nbsp;<span>¥12312.00</span>
                  </p>
                </div>
              </div>
            </div>
            <div>
              <div
                style="font-size: 15px;line-height: 22px; font-weight: 700;margin-top:10px;"
              >
                <span>微客账户</span>
              </div>
              <div style="display:flex; width: 100%;margin-top:5px;">
                <div style="width:50%">
                  <p>未入账:&nbsp;&nbsp;<span>¥12312.00</span></p>
                  <p style="margin-top:5px;">
                    已结算:&nbsp;&nbsp;<span>1</span>
                  </p>
                </div>
                <div>
                  <p>待结算金额:&nbsp;&nbsp;<span>¥12312.00</span></p>
                </div>
              </div>
            </div>
            <div>
              <div
                style="font-size: 15px;line-height: 22px; font-weight: 700;margin-top:10px;"
              >
                <span>积分账户</span>
              </div>
              <div style="display:flex; width: 100%;margin-top:5px;">
                <div style="width:50%">
                  <p>当前积分:&nbsp;&nbsp;<span>¥12312.00</span></p>
                </div>
                <div>
                  <p>累计积分:&nbsp;&nbsp;<span>¥12312.00</span></p>
                </div>
              </div>
            </div>
            <div>
              <div
                style="font-size: 15px;line-height: 22px; font-weight: 700;margin-top:10px;"
              >
                <span>优惠券</span>
              </div>
              <div style="display:flex; width: 100%;margin-top:5px;">
                <div style="width:50%">
                  <p>未使用:&nbsp;&nbsp;<span>¥12312.00</span></p>
                  <p style="margin-top:5px;">
                    已过期:&nbsp;&nbsp;<span>1</span>
                  </p>
                </div>
                <div>
                  <p>已使用:&nbsp;&nbsp;<span>¥12312.00</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="行为记录" name="first">
              <div class="list-heads" style="height:100%">
                <el-tabs v-model="activeName1" @tab-click="handleClick">
                  <el-tab-pane label="全部" name="first"></el-tab-pane>
                  <el-tab-pane label="分享记录" name="secondt"></el-tab-pane>
                  <el-tab-pane label="浏览记录" name="third"></el-tab-pane>
                </el-tabs>
              </div>
            </el-tab-pane>
            <el-tab-pane label="基本记录" name="second">
              <div class="list-heads"></div>
            </el-tab-pane>
            <el-tab-pane label="分销信息" name="third">
              <div class="list-heads"></div>
            </el-tab-pane>
            <el-tab-pane label="交易明细" name="fourth">
              <div class="list-heads" style="height:100%">
                <Table :data="tableData">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column label="交易时间" width="120">
                  </el-table-column>
                  <el-table-column prop="name" label="交易单号" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="交易来源"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="金额小计"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="优惠减免"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="积分折扣"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="余额抵扣"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="实付款"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="支付方式"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </Table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="积分明细" name="five">
              <div class="list-heads" style="height:100%">
                <Table :data="tableData">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column label="交易时间" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column prop="name" label="交易类型" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="变动积分"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="剩余积分"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="备注"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </Table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="储值账户明细" name="six">
              <div class="list-heads" style="height:100%">
                <Table :data="tableData">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column label="交易时间" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column prop="name" label="交易类型" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="变动金额"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="剩余金额"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="备注"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </Table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="优惠券明细" name="seven">
              <div class="list-heads" style="height:100%">
                <el-select
                  v-model="value"
                  placeholder="全部状态"
                  size="mini"
                  style="width: 114px;"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="list-heads" style="height:100%">
                <Table :data="tableData">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column label="优惠券名称" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column prop="name" label="使用规则" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="优惠券类型"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="有效时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="优惠券状态"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </Table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <Footer>
        <el-button type="primary" @click="$emit('out')">返回</el-button>
      </Footer>
      <div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="25%">
          <div>
            <span>调整等级至:&nbsp;&nbsp;&nbsp;</span>
            <el-select
              v-model="value"
              clearable
              placeholder="请选择"
              width="400"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div
              style="margin-top:10px;padding-left: 55px; line-height:30px;color: #9797A1;font-size: 12px;"
            >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成长值将自动调整为该等级的最低值
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          title="选择优惠券"
          :visible.sync="dialogVisible1"
          width="40%"
        >
          <Table :data="tableData">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="优惠券名称" min-width>
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="优惠券类型" min-width>
            </el-table-column>
            <el-table-column
              prop="address"
              label="优惠券时间"
              min-width
              show-overflow-tooltip
            >
            </el-table-column>
          </Table>
          <div
            style="margin-top:10px;line-height:30px;color: #9797A1;font-size: 12px;"
          >
            总共2条
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div>
        <el-dialog
          title="选择优惠券"
          :visible.sync="dialogVisible2"
          width="30%"
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="修改积分（增减）" prop="name" style="500px">
              <el-input v-model="ruleForm.name"></el-input>
              <div style="color: #9797A1;font-size: 12px;">
                <span
                  >输入100，标识增加100，输入-100，表示减少100，只能输入整数</span
                >
              </div>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
              <el-input v-model="ruleForm.desc" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Custormer",
  props: {
    custormerCode: {
      type: Object,
      default: () => {}
    },
    cardCode: {
      type: Array,
      default: () => []
    },
    oneCode: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [
        {
          date: "满减优惠券",
          name: "代金券",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "满减优惠券",
          name: "代金券",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "满减优惠券",
          name: "代金券",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        }
      ],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      value: "",
      activeName: "first",
      activeName1: "first",
      Url: this.$store.state.qiniu,
      headerbtn: [
        "修改会员等级",
        "送优惠劵",
        "修改积分",
        "冻结客户",
        "冻结微客",
        "充值",
        "消费",
        "修改微客等级"
      ],
      ruleForm: {
        name: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        desc: [
          {
            required: true,
            message: "最多100字，请备注增减原因",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.chart();
  },
  methods: {
    chart() {
      let myChart = this.$echarts.init(document.getElementById("myecharts"));
      let option = {
        legend: {
          x: "left",
          color: ["red", "yellow"],
          data: ["个人值", "平均值"]
        },
        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        polar: [
          {
            nameGap: 5, // 图中工艺等字距离图的距离
            center: ["50%", "50%"], // 图的位置
            indicator: [
              { text: "消费次数", max: 500 },
              { text: "消费金额", max: 500 },
              { text: "消费力", max: 500 },
              { text: "连带率", max: 500 },
              { text: "平均折扣", max: 500 }
            ]
          }
        ],
        series: [
          {
            type: "radar",
            data: [
              {
                value: [200, 350, 60, 150, 400],
                itemStyle: {
                  normal: {
                    color: "red",
                    lineStyle: {
                      color: "red"
                    }
                  }
                },
                name: "个人值"
              },
              {
                value: [20, 400, 156, 150, 400],
                itemStyle: {
                  normal: {
                    color: "#409EFF",
                    lineStyle: {
                      color: "#409EFF"
                    }
                  }
                },
                name: "平均值"
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    customerBtn(index) {
      if (index === 0) {
        this.dialogVisible = true;
      } else if (index === 1) {
        this.dialogVisible1 = true;
      } else if (index === 2) {
        this.dialogVisible2 = true;
      }
    },
    handleClick() {}
  }
};
</script>
<style lang="scss" scoped>
.customer {
  margin: 20px;
  .list-container {
    height: 100%;
    .list-heads {
      .header-nav {
        min-height: 140px;
        display: flex;
        width: 100%;
        .img-nav {
          margin-top: 11px;
          width: 120px;
          height: 120px;
          border-radius: 4px;
          background-size: cover;
          //background-image: url('http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqHEiaUc8PFgKM4x4VvRkUibNIrkkCVWSd1icV9ia4fVVJR305WRGQAczyRLcBptzicMiaBTQyh5cyDgFmg/132');
          background-position: center center;
        }
        .header-info {
          width: 100%;
          margin-top: 15px;
          .header-text {
            font-weight: 400;
            display: flex;
            margin-left: 20px;
            width: 100%;
            height: 70px;
            border-bottom: 1px solid gainsboro;
            div {
              p {
                font-size: 13px;
                font-weight: 400;
              }
              span {
                font-size: 13px;
                font-weight: 400;
              }
            }
          }
          .header-btn {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
            width: 70%;
          }
        }
      }
    }
    .customer-content {
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
#customer .el-collapse-item__header {
  height: 100px;
}
</style>
